{% extends "base_with_toolbar.html" %}
{% block title %}Add{% endblock %}

{% block active_nav %}add_nav{% endblock %}

{% block body %}
  <ul class="nav nav-pills" id="tabs">
	<li><a href="#person" data-toggle="tab">Person</a></li>
	<li><a href="#address" data-toggle="tab">Address</a></li>
	<li><a href="#group_or_team" data-toggle="tab">Group or Team</a></li>
  </ul>
	
  <div class="tab-content">
	<div class="fade tab-pane" id="person" data-src="{% url person_form %}"></div>
	<div class="fade tab-pane fade" id="address" data-src="{% url address_form %}"></div>
	<div class="fade tab-pane fade" id="group_or_team" data-src="{% url group_or_team_form %}"></div>
  </div>
{% endblock %}

{% block javascript_extend %}
{{ block.super }}
<script>
// Binds the 'show' event for a tab to load the content
// from the url attribute of that tab.
$('#tabs').bind('show', function(e) {
  loadFormContent($(e.target).attr('href')); // Selected tab
  unloadFormContent($(e.relatedTarget ).attr('href')); // Previous tab
});

// Load the data-src content into the specified tab-pane
function loadFormContent(paneID) {
  src = $(paneID).attr('data-src');
  $(paneID).load(src); 
}

// Unload the html content from the specified tab-pane
function unloadFormContent(paneID) {
  $(paneID).empty(); 
}

// Set active tab (default first)
{% if active_tab %}
$('#tabs a[href="#{{ active_tab }}"]').tab('show');
{% else %}
$('#tabs a:first').tab('show');
{% endif %}
</script>
{% endblock %}